
<style lang="scss" scoped>
.skuContent {
    padding: 0 4%;
    height: 540px;
    overflow-y: auto;
    .btn{
        width: 60vw;
        position: fixed;
        left: 20%;
        bottom: 20px;
    }
    .s_s_num{
        margin-top: 15px;
        text-align: right;
        font-weight: bold;
    }
    .s_s_list {
        margin-top: 5px;

        span {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            padding: 5px;
            border-radius: 5px;
            margin-right: 15px;
            background-color: #eee;
            margin-bottom: 10px;
        }

        .active {
            background-color: rgb(50, 134, 255);
            color: #fff;
        }
    }

    .s_s_title {
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        font-weight: bold;
    }

    .s_img {
        height: 90px;

        img {
            height: 90px;
        }
    }
}

.detail {
    min-height: 100vh;
    padding: 46px 0 90px 0;
    background-color: #f5f5f5;
}

.swiperImg {
    width: 100%;
}

.pro_title {
    margin-top: 7px;
    padding: 20px 4%;
    background-color: #fff;
}

.price {
    padding: 0 4%;
    height: 35px;
    line-height: 35px;
    background-color: #fff;

    .icon,
    .money {
        font-size: 12px;
        font-weight: bold;
        color: red;
    }

    .money {
        font-size: 27px;
    }

    .oldMoney {
        font-size: 14px;
        text-decoration: line-through;
        color: #999;
    }
}

.detailSku {
    padding: 5px 4%;
    display: flex;
    justify-content: space-between;
    color: #999;
    background-color: #fff;
}

.selectSku {
    height: 35px;
    line-height: 35px;
    padding: 7px 4%;
    background-color: #fff;
    margin-top: 15px;

    &:active {
        background-color: #f5f5f5;
    }
}

.desc_title {
    height: 45px;
    line-height: 45px;
    color: #333;
    font-size: 27px;
    text-align: center;
    margin-top: 35px;
}
</style>
<template lang="">
    <div class="detail">
        <van-skeleton row="15" :loading="loading">
        <p-navigator 
            is-fixed
            :text="'商品详情'" 
        />
        <div class="swiper">
            <van-swipe v-if="desc.duck_img_list.length != 0" class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in desc.duck_img_list" :key="index">
                    <img class="swiperImg" :src="item" alt="">
                </van-swipe-item>
            </van-swipe>
            <img v-else class="swiperImg" :src="desc.duck_img" alt="">
        </div>
        <!-- 标题 -->
        <div class="pro_title">
            {{desc.duck_name}}
        </div>
        <!-- 售价 -->
        <div class="price">
            <span class="icon">
                ￥
            </span>
            <span class="money">
                {{ desc.duck_min_price }}
            </span>
            <span class="oldMoney">
                ￥ {{ desc.duck_no_price }}
            </span>
        </div>
        <!-- 售卖的详情 -->
        <div class="detailSku">
            <span>
                销量: {{ desc.duck_hot }}
            </span>
            <span>
                库存: {{ desc.num }}
            </span>
            <span>
                热度: {{ desc.duck_look }}
            </span>
        </div>
        <!-- 选择规格 -->
        <div class="selectSku" @click="skuShow=true">
            已选择: {{ desc.sku_color[sku_index.color_index].color }}
            {{ desc.sku_size[sku_index.size_index].size }}
        </div>
        <!-- 详情 -->
        <div class="desc_title">
            商品详情
        </div>
        <!-- 具体详情参数 -->
        <div class="desc_img" v-html="desc.duck_desc">

        </div>

        <!-- 选择规格的弹出框 -->
        <van-action-sheet 
            title="规格"
            v-model="skuShow">
            <div class="skuContent">
                <!-- 图片 -->
                <div class="s_img">
                    <img :src="desc.duck_img">
                    <span>
                        ￥ {{select_price}}
                    </span>
                </div>
                <!-- 规格参数 -->
                <div class="s_s_title">
                    {{ desc.sku_color_title }}:
                </div>
                <div class="s_s_list">
                    <span 
                    :class="sku_index.color_index == index ? 'active' : ''"
                    v-for="(item,index) in desc.sku_color" :key="index"
                    @click="sku_index.color_index = index">
                        {{ item.color }}
                    </span>
                    <!-- <span class="active">
                        牵梦星和
                    </span>
                    <span>
                        牵梦星和
                    </span> -->
                </div>
                <!-- 规格参数 -->
                <div class="s_s_title">
                    {{ desc.sku_size_title }}:
                </div>
                <div class="s_s_list">
                    <span 
                    :class="sku_index.size_index == index ? 'active' : ''"
                    v-for="(item,index) in desc.sku_size" 
                    :key="index"
                    @click="sku_index.size_index = index">
                        {{ item.size }}
                    </span>
                    <!-- <span class="active">
                        牵梦星和
                    </span>
                    <span>
                        牵梦星和
                    </span> -->
                </div>
                <!-- 数量 -->
                <div class="s_s_num">
                    购买数量
                    <button :disabled="buy_num<=1" @click="buy_num--">
                        ➖
                    </button>
                    <span>
                        {{ buy_num }}
                    </span>
                    <button @click="desc.num <= buy_num ? '' : buy_num++">
                        ➕
                    </button>
                </div>
                <!-- 按钮组 -->
                <div class="btn">
                    <van-button 
                    @click="add"
                    round
                    block
                    color="linear-gradient(to right, rgb(255, 204, 29), rgb(238, 12, 36))">
                        加入购物车
                    </van-button>
                </div>
            </div>
        </van-action-sheet>
    </van-skeleton>
    </div>
</template>
<script>
import { getProductDesc,addCartList } from '@/api'
export default {
    methods: {
        add(){
            // console.log(123);
            let obj = {
                pro_title: this.desc.duck_name,
                pro_img: this.desc.duck_img,
                pro_price: this.select_price,
                pro_num: this.buy_num,
                pro_id: this.desc.ID,
                pro_sku: JSON.stringify([
                    this.desc.sku_color[this.sku_index.color_index],
                    this.desc.sku_size[this.sku_index.size_index],
                ])
            }
            // 加入购物车
            addCartList(obj).then(res => {
                // console.log(res.data);
                if(res.data.code == 1){
                    this.$toast('加入购物车成功');
                }
            })
        },
        getDesc(product_id, admin_id) {
            getProductDesc({ product_id, admin_id }).then(res => {
                if (res.data.code == 1) {
                    this.desc = res.data.result[0];
                    // 把轮播图转换成正常的数据
                    this.desc.duck_img_list = JSON.parse(this.desc.duck_img_list)
                    // 万能的图片铺宽公式
                    this.desc.duck_desc = this.desc.duck_desc.replace(/<img/g, "<img style='width:100vw;'").replace(/<video/g, '<video style="width:100vw;"')
                    // 先转换skucolor
                    this.desc.sku_color = JSON.parse(this.desc.sku_color);
                    // 在转换skusize
                    this.desc.sku_size = JSON.parse(this.desc.sku_size);
                    this.loading = false;
                    // 默认显示的价格
                    if(this.desc.sku_type == 1){
                        this.select_price = this.desc.sku_size[this.sku_index.size_index].price;
                    }else{
                        this.select_price = this.desc.sku_color[this.sku_index.color_index].price;
                    }
                }
            })
        }
    },
    created() {
        this.getDesc(this.$route.params.product_id, this.$route.params.admin_id);
    },
    // 监听
    watch: {
        "sku_index.size_index"(n){
            if(this.desc.sku_type == 1){
                this.select_price = this.desc.sku_size[n].price;
            }
        },
        "sku_index.color_index"(n){
            if(this.desc.sku_type == 0){
                this.select_price = this.desc.sku_color[n].price;
            }
        },
    },
    data() {
        return {
            // 是否显示骨架屏
            loading: true,
            skuShow: false,
            // 记录当前点击选项的下标
            sku_index: {
                color_index:0,
                size_index: 0
            },
            // 当前选择的价格
            select_price: 0,
            // 数量
            buy_num: 1,
            desc: {
                ID: 0,
                sku_type:0,
                sku_color_title: '',
                sku_color: [{color:''}],
                sku_size_title: '',
                sku_size: [{size:''}],
                duck_desc: '',
                duck_img: "",
                duck_img_list: [],
                duck_name: '',
                duck_min_price: 0,
                duck_max_price: 0,
                duck_hot: 0,
                duck_look: 0,
                num: 0
            }
        }
    },
}
</script>